<template>
  <div class="scene-swiper-container">
    <template v-if="twoDimensionalSceneList?.length">
      <el-carousel
        :indicator-position="'none'"
        arrow="always" 
        :loop="true"
        :autoplay="false"
        ref="carousel"
        @change="handleCarouselChange"
      >
        <el-carousel-item
          v-for="(item, index) in twoDimensionalSceneList"
          :key="index"
        >
          <div class="scene_view_page">
            <div
              v-for="viewItem in item"
              :key="viewItem.id"
              class="scene_view_item"
              :class="{ scene_view_item_active: viewItem.id == curSceneId }"
              @click="emit('onClickChangeScene',viewItem.id)"
            >
              <img :src="viewItem.thumbUrl || viewItem.VRImg" alt="">
              <span class="scene-tit" :title="viewItem.title">{{ viewItem.title }}</span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </template>
    <template v-else>
      <el-empty description="暂无数据" image=""/>
    </template>
    <!-- 场景分类 -->
    <div class="scene-type" v-if="model == 'pc'">
      <div class="type-item" 
        v-for="(item, index) in firstSceneType" 
        :key="index" 
        :class="curFormSceneId == item.id ? 'type-item-checked' : ''"
        @click="handleCurFormSceneTypeChange(item.id)">
        {{item.title}}
      </div>
    </div>
    
  </div>
</template>
<script setup>
import { ref, toRefs, defineProps, defineEmits, watch, onMounted } from 'vue'
const props = defineProps({
  model:String,
  sceneData:Object,
  curSceneId:String || Number,
})
const { sceneData, curSceneId, model } = toRefs(props)
const sceneTree = ref(sceneData.value.sceneTree)
const twoDimensionalSceneList = ref() //幻灯片二维数组
const emit = defineEmits(["onClickChangeScene"])
const firstSceneType = ref(sceneTree.value[0].children)

const curFormSceneList = ref([])
const curFormSceneId = ref(null)
// 选择场景类型 获取当前场景分类列表
const handleCurFormSceneTypeChange = (id) => {
  curFormSceneId.value = id
  curFormSceneList.value = []
  getCurFormSceneByPid(sceneTree.value, id)
  getSceneSwipe()
  emit('onClickChangeScene',curFormSceneList.value[0].id)
}
// 递归获取列表 本地
const getCurFormSceneByPid = (arr, pid, flag = false) => {
  arr.forEach(item => {
    if(item.id == pid || flag){
      curFormSceneList.value = curFormSceneList.value.concat(item.sceneList)
      if(item.children?.length > 0){
        getCurFormSceneByPid(item.children, pid, true)
      }
    }else if(item.children?.length > 0){
      getCurFormSceneByPid(item.children, pid)
    }
  })
}
// getCurFormSceneByPid(sceneTree.value, '0')

//场景轮播图
const getSceneSwipe = async () => {
  twoDimensionalSceneList.value = []
  let count = model.value == 'pc' ? 7 : 3
  for (let i = 0; i < curFormSceneList.value.length; i += count) {
    twoDimensionalSceneList.value.push(curFormSceneList.value.slice(i, i + count))
  }
}
getSceneSwipe()

const initialIndex = ref(0)
const carousel = ref()
// 监听场景图id变化
watch(() => sceneData.value.curSceneId,() => {
  handleCarouselChange()
},{deep:true})
// 场景图变化 切换幻灯片轮播
const handleCarouselChange = (val) => {
  if(carousel.value && val){
    carousel.value.setActiveItem(val)
    return
  }
  // 获取当前场景图的幻灯片二维数组索引
  initialIndex.value = twoDimensionalSceneList.value.findIndex(curList => {
    let is = curList.findIndex(item => {
      return item.id == sceneData.value.curSceneId
    })
    return is == -1 ? false : true
  }) 
  // 如果要跳转的场景图不在当前场景分类下，找到他的场景分类列表
  setTimeout(() => {
    if(carousel.value && initialIndex.value != -1) carousel.value.setActiveItem(initialIndex.value)
  }, 0);
}
onMounted(() => {
  // 默认选中第一个场景类型
  handleCurFormSceneTypeChange(firstSceneType.value[0].id)
})
// 暴露方法
defineExpose({
  handleCurFormSceneTypeChange
})
</script>
<style lang="scss" scoped>
.scene_view_page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.scene_view_item:last-child {
  margin-right: 0;
}
.scene_view_item .scene_image {
  width: 120px;
  height: 70px;
}
.scene_view_item {
  width: 140px;
  height: 92px;
  margin-right: 23px;
  background-color: rgba(0, 0, 0, .8);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 2px solid transparent;
  .scene-tit {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
    width: 132px;
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
  &:hover{
    cursor: pointer;
    border: 2px solid #fff;
  }
}
.scene_view_item_active {
  border: 2px solid #fff;
}
.scene-type{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .type-item{
    margin: 0 10px;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    text-align: center;
    opacity: .6;
    margin-bottom: 5px;
    cursor: pointer;
    border: 1px solid #999;
    background: rgba(0, 0, 0, .4);
    border-radius: 13px;
    box-sizing: border-box;
    padding: 1px 12px;
  }
  .type-item-checked{
    border: 2px solid #fff;
    opacity: 1;
  }
}
::v-deep(.el-empty){
  .el-empty__image{
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .scene_view_item {
    width: 108px;
    height: 80px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .scene_view_item .scene-tit {
    width: 100px;
  }
  .scene_view_item img {
    width: 100px;
    height: 56px;
  }
}
</style>
